<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>#(mainTitle??) </title>

	<meta name="description" content="User login page" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
#@includeBaseCss()
        <script src="#(ctx)/res/js/echarts.min.js"></script>
</head>
<body>

    <div id="home_header">
        <!-- <div class="col-"></div> -->
    </div>

    <div style="width: 1000px:height：100%;display: inline-flex;justify-content:center;flex-direction: row; background-color: white;"> 
            <div id="main" style="width: 500px;height:400px;flex: 1;"></div>
            <div id="pie" style="width: 500px;height: 400px;"></div>
    </div>

    <section id="line" style="width:100%; height: 500px;">

    </section>
    #@includeBaseJs()
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '产品销量比较'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

            // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var lineChart = echarts.init(document.getElementById('line'));
    var lineOPtion = {
        xAxis: {
            type: 'category',
            data: ['2017-05','2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11','2017-12','2018-01','2018-02','2018-03','2017-04']
        },
        yAxis: {
            type: 'value',
            name: '利润',

        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320, 550, 660, 1000, 1111, 1200],
            type: 'line'
        }]
    };
    lineChart.setOption(lineOPtion);

    //pie
    var piechart = echarts.init(document.getElementById('pie'));

    var pieOptions = {
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ],
        itemStyle: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        labelLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        }
    };
    piechart.setOption(pieOptions);
    </script>
</body>
</html>